<template>
  <div class="about-view">
    <el-card>
      <template #header>
        <h2>关于我们</h2>
      </template>

      <el-descriptions title="项目信息" :column="2" border>
        <el-descriptions-item label="项目名称">Element Plus 模板</el-descriptions-item>
        <el-descriptions-item label="版本">v1.0.0</el-descriptions-item>
        <el-descriptions-item label="开发者">Vue.js 团队</el-descriptions-item>
        <el-descriptions-item label="构建时间">
          {{ buildTime }}
        </el-descriptions-item>
        <el-descriptions-item label="项目ID">
          {{ projectId }}
        </el-descriptions-item>
        <el-descriptions-item label="技术栈">Vue 3 + Element Plus + UnoCSS</el-descriptions-item>
      </el-descriptions>

      <el-divider />

      <h3>技术特性</h3>
      <el-row :gutter="20">
        <el-col v-for="tech in technologies" :key="tech.name" :span="8">
          <el-card shadow="hover" class="tech-card">
            <div class="tech-icon">
              <el-icon :size="40" :color="tech.color">
                <component :is="tech.icon" />
              </el-icon>
            </div>
            <div class="tech-info">
              <h4>{{ tech.name }}</h4>
              <p>{{ tech.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-divider />

      <h3>联系我们</h3>
      <el-form :model="contactForm" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="contactForm.name" placeholder="请输入您的姓名" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="contactForm.email" placeholder="请输入您的邮箱" />
        </el-form-item>
        <el-form-item label="消息">
          <el-input v-model="contactForm.message" type="textarea" :rows="4" placeholder="请输入您的消息" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">发送消息</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
// 以下已通过自动引入配置，无需手动导入：
// ref, computed, ElMessage, Element Plus图标, nanoid, cloneDeep

// 项目信息
const projectId = ref(nanoid())
const buildTime = computed(() => {
  return new Date().toLocaleDateString('zh-CN')
})

// 技术栈信息
const technologies = ref([
  {
    name: 'Vue 3',
    description: '渐进式 JavaScript 框架',
    icon: Monitor,
    color: '#4fc08d'
  },
  {
    name: 'Element Plus',
    description: '基于 Vue 3 的组件库',
    icon: Setting,
    color: '#409eff'
  },
  {
    name: 'UnoCSS',
    description: '即时原子化 CSS 引擎',
    icon: Cpu,
    color: '#333333'
  },
  {
    name: 'Pinia',
    description: 'Vue 的直观状态管理',
    icon: DataBoard,
    color: '#ffd859'
  },
  {
    name: 'Vue Router',
    description: 'Vue.js 的官方路由',
    icon: Connection,
    color: '#4fc08d'
  },
  {
    name: 'Vite',
    description: '下一代前端构建工具',
    icon: Tools,
    color: '#646cff'
  }
])

// 联系表单
const initialForm = {
  name: '',
  email: '',
  message: ''
}

const contactForm = ref(cloneDeep(initialForm))

// 提交表单
const handleSubmit = () => {
  if (!contactForm.value.name || !contactForm.value.email || !contactForm.value.message) {
    ElMessage.warning('请填写完整信息')
    return
  }

  // 这里可以调用API发送消息
  ElMessage.success('消息发送成功，我们会尽快回复您！')
  handleReset()
}

// 重置表单
const handleReset = () => {
  contactForm.value = cloneDeep(initialForm)
}
</script>

<style scoped>
.about-view {
  padding: 20px;
}

.tech-card {
  text-align: center;
  margin-bottom: 20px;
  min-height: 200px;
}

.tech-icon {
  margin-bottom: 16px;
}

.tech-info h4 {
  margin: 0 0 8px 0;
  color: #303133;
}

.tech-info p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}
</style>
